
<!DOCTYPE html>
<html lang="en">
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="yes" name="apple-touch-fullscreen" />
<meta content="telephone=no,email=no" name="format-detection" />
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<style type="text/css">
.demo {width: 350px;margin: 100px auto 10px auto;}
#g1, #g2 {margin-top: 50px;}
</style>
<link rel="stylesheet" href="css/jquery.range.css" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.range.js"></script>
<script type="text/javascript">
$(function () {
	$('.single-slider').jRange({
		from: 0,
		to: 100,
		step: 1,
		scale: [0, 25, 50, 75, 100],
		format: '%s',
		width: 300,
		showLabels: true,
		showScale: true
	});

	$('.range-slider').jRange({
		from: 0,
		to: 100,
		step: 1,
		scale: [0, 25, 50, 75, 100],
		format: '%s',
		width: 300,
		showLabels: true,
		isRange: true
	});

	$("#g1").click(function () {
		var aa = $(".single-slider").val();
		alert(aa);
	});

	$("#g2").click(function () {
		var aa = $(".range-slider").val();
		alert(aa);
	});
});
</script>
<div class="demo">
<input type="hidden" class="single-slider" value="0" />
</div>
<div class="demo">
<input class="range-slider" type="hidden" value="10,89" />
</div>
</body>
</html>
